import './style'
import React, { Component } from 'react'
import AT from './paint'
import city from './citys'

class ViewIntro extends Component {
	constructor(props) {
		super(props)

		this.state = {
			runClass: '',
			date: '2014年6月',
			count: 1
		}

	}
	shouldComponentUpdate(nextProps, nextState) {
		return true
	}


	componentWillMount(){
		AT.kill()
	}

	componentDidMount(){
		let stepOne = () => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					this.setState({
						runClass: 'run'
					})

					resolve()
				}, 500)
			})
		}

		let stepTwo = () => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					AT.init('AT')

					resolve()
				}, 1000)
			})
		}

		let stepThree = () => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					this.setState({
						date: '2014年10月',
						count: 2
					})
					resolve()
				}, 3000)
			})
		}

		let stepFour = () => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					this.runDigital()
					resolve()
				}, 2500)
			})
		}

		let stepFive = () => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					this.setState({
						runClass: 'disappear'
					})
					resolve()
				}, 2000)
			})
		}

		let stepFix = () => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					this.props.history.push('/coupon/' + this.props.match.params.mobile + '/0')
					resolve()
				}, 800)
			})
		}

		let start = async () => {
			await stepOne()
			await stepTwo()
			await stepThree()
			await stepFour()
			await stepFive()
			await stepFix()
		}

		start()
	}

	// 城市30个，动画滚动
	runDigital(){
		let sleep = (time = 20) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve()
				}, time)
			})
		}

		let runSleep = async () => {
			for(let i = 2; i < city.length; i ++){
				await sleep()

				this.setState({
					date: city[i].date,
					count: i > 30? 30: i
				})
			}
		}

		runSleep()
	}


	render() {
		
		const winWidth = window.innerWidth * 2,
			winHeight = window.innerHeight * 2

		let { date, count, runClass } = this.state

		return (
			<div className={`view-intro view ${runClass}`}>
				<canvas className="view-intro__canvas" id="AT" ref="AtCanvas" width={ winWidth } height={ winHeight }></canvas>

				<div className="pakage">
					<div className="pakage__one"></div>
					<div className="pakage__two"></div>
					<div className="pakage__three"></div>
					<div className="pakage__red1"></div>
					<div className="pakage__red2"></div>
					<div className="pakage__text">
						<h2>{ date }</h2>
						<h3>凹凸进驻第 { count } 座城市 _</h3>
					</div>
				</div>
			</div>
		)
	}
}

export default ViewIntro